<template>
  <div class="common-table-container">
    <!-- 搜索区域 -->
    <el-form :model="searchForm" inline class="common-search-form">
      <el-form-item label="部门名称">
        <el-input
            v-model="searchForm.deptName"
            placeholder="请输入部门名称"
            clearable
            style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 120px"
        >
          <el-option label="启用" value="0"/>
          <el-option label="停用" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="common-table-header">
      <el-button type="primary" @click="handleAdd">新增部门</el-button>
    </div>

    <!-- 表格区域（展示父子关联的部门，支持展开/折叠） -->
    <div class="fixed-table-container">
      <el-table
          :data="formattedDeptTree"
          class="common-table"
          v-loading="loading"
          stripe
          border
          height="100%"
          row-key="deptId"
      :tree-props="{
      children: 'children',
      hasChildren: 'hasChildren',
      indent: 24
      }"
      default-expand-all
      :expand-row-keys="defaultExpandKeys"
      >
      <!-- 部门ID列 -->
      <el-table-column prop="deptId" label="部门ID" width="80" align="center"/>

      <!-- 部门名称列：带层级缩进（核心视觉区分） -->
      <el-table-column prop="deptName" label="部门名称" min-width="180">
        <template #default="scope">
          <!-- el-table-tree-indent：Element 自带的层级缩进组件（必加） -->
          <el-table-tree-indent :level="scope.row.level" class="indent-component"/>
          <span :class="scope.row.status === '1' ? 'dept-disabled' : ''">
              {{ scope.row.deptName }}
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="parentName" label="上级部门" min-width="120"/>
      <el-table-column prop="orderNum" label="排序" width="80" align="center"/>
      <el-table-column prop="leader" label="负责人" width="100"/>
      <el-table-column prop="phone" label="联系电话" width="120"/>
      <el-table-column prop="email" label="邮箱" min-width="150"/>
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
            {{ scope.row.status === '0' ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right" align="center">
        <template #default="scope">
          <div class="operation-buttons">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)"
                       :disabled="scope.row.children && scope.row.children.length > 0">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
      </el-table>
    </div>

    <div class="common-pagination">
      <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          background
          prev-text="上一页"
          next-text="下一页"
          page-sizes-text="每页条数"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增/编辑对话框（下拉选择上级部门，关联父子） -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogMode === 'add' ? '新增部门' : '编辑部门'"
        width="500px"
    >
      <el-form
          ref="deptFormRef"
          :model="deptForm"
          :rules="deptRules"
          label-width="120px"
          class="dept-form"
      >
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="deptForm.deptName" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="上级部门" prop="parentId">
          <!-- 下拉选择上级部门，使用树形下拉 -->
          <el-cascader
              v-model="parentIdArr"
              :options="deptCascaderOptions"
              :props="{
          value: 'deptId',
          label: 'deptName',
          children: 'children',
          disabled: (data) => data.deptId === deptForm.deptId // 禁用自身（编辑时）
          }"
              placeholder="请选择上级部门"
              clearable
          />
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input-number v-model="deptForm.orderNum" :min="0" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="deptForm.leader" placeholder="请输入负责人"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="deptForm.phone" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="deptForm.email" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="deptForm.status" placeholder="请选择状态">
            <el-option label="启用" value="0"/>
            <el-option label="停用" value="1"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFormSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { findDept, deleteDept } from '@/api/dept'
import DeptDialog from './components/DeptDialog.vue'

// 基础状态
const loading = ref(false)
const tableData = ref([])  // 接口返回的原始扁平数据
const deptTree = ref([])   // 构建后的树形数据（含所有节点）
const defaultExpandKeys = ref([])  // 强制展开的节点ID（根节点）

// 搜索和分页配置（不变）
const searchForm = reactive({ deptName: '', status: '' })
const pagination = reactive({ current: 1, size: 10, total: 0 })

// 1. 核心：构建标准树形结构（确保子节点完全嵌套在父节点的children中）
const buildStandardDeptTree = (flatDepts) => {
  // 步骤1：构建部门ID映射表（统一数字类型，避免匹配失败）
  const deptMap = new Map()
  flatDepts.forEach(dept => {
    const deptId = Number(dept.deptId)
    const parentId = Number(dept.parentId)
    // 每个节点初始化为：含children、hasChildren、level字段
    const node = {
      ...dept,
      deptId: deptId,
      parentId: parentId,
      children: [],  // 子节点数组（初始空）
      hasChildren: false,  // 是否有子节点（后续更新）
      level: 0,  // 层级（根节点0，子节点1，以此类推）
      parentName: '顶级部门'  // 上级部门名称（默认顶级）
    }
    deptMap.set(deptId, node)
  })

  // 步骤2：严格关联父子节点（子节点加入父节点的children）
  const rootNodes = []  // 根节点（parentId=0）
  deptMap.forEach(node => {
    const parentId = node.parentId
    if (parentId === 0) {
      // 根节点：直接加入根数组
      rootNodes.push(node)
    } else {
      // 非根节点：找到父节点并加入children
      const parentNode = deptMap.get(parentId)
      if (parentNode) {
        // 关键：将当前节点加入父节点的children数组
        parentNode.children.push(node)
        // 更新父节点的hasChildren状态
        parentNode.hasChildren = parentNode.children.length > 0
        // 更新当前节点的层级和上级名称
        node.level = parentNode.level + 1
        node.parentName = parentNode.deptName
      } else {
        // 异常：父节点不存在，作为根节点（避免数据丢失）
        rootNodes.push(node)
        console.warn(`部门【${node.deptName}】(ID:${node.deptId}) 父部门不存在，已作为顶级部门处理`)
      }
    }
  })

  // 步骤3：按orderNum排序（同级节点排序，确保“父在前、子在后”的顺序）
  const sortNodesByOrder = (nodes) => {
    // 同级节点按orderNum升序（数字小的在前）
    const sortedNodes = nodes.sort((a, b) => Number(a.orderNum) - Number(b.orderNum))
    // 递归排序子节点（子节点内部也按orderNum排序）
    sortedNodes.forEach(node => {
      if (node.children && node.children.length > 0) {
        node.children = sortNodesByOrder(node.children)
      }
    })
    return sortedNodes
  }

  // 排序后的根节点数组（标准树形结构）
  const sortedRootNodes = sortNodesByOrder(rootNodes)

  // 调试：打印树形结构（确认children嵌套正确）
  console.log('标准树形结构（含children）：', JSON.parse(JSON.stringify(sortedRootNodes)))

  // 设置默认展开的根节点ID（确保根节点默认展开）
  defaultExpandKeys.value = sortedRootNodes.map(node => node.deptId)

  return sortedRootNodes
}

// 2. 格式化树形数据：仅返回根节点（表格数据源必须是根节点数组）
const formattedDeptTree = computed(() => {
  // deptTree 是完整的树形结构（根节点+子节点嵌套），直接作为表格数据源
  return deptTree.value
})

// 3. 获取部门数据（接口请求 + 树形结构构建）
const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      ...searchForm,
      page: pagination.current,
      rows: pagination.size
    }
    const response = await findDept(params)
    if (response && response.code === 200) {
      const flatDepts = response.data || []  // 接口返回的扁平数据
      pagination.total = response.count || 0  // 总条数

      // 构建标准树形结构（核心步骤）
      deptTree.value = buildStandardDeptTree(flatDepts)
    } else {
      ElMessage.error('获取部门列表失败')
      deptTree.value = []
    }
  } catch (error) {
    console.error('获取部门列表异常:', error)
    ElMessage.error('获取部门列表失败，请重试')
    deptTree.value = []
  } finally {
    loading.value = false
  }
}

// 其他函数（搜索、重置、新增、编辑、删除、日期格式化）不变
const handleSearch = () => { pagination.current = 1; fetchData() }
const resetSearch = () => { searchForm.deptName = ''; searchForm.status = ''; pagination.current = 1; fetchData() }
const handleSizeChange = (size) => { pagination.size = size; pagination.current = 1; fetchData() }
const handleCurrentChange = (current) => { pagination.current = current; fetchData() }
const handleAdd = () => { /* 不变 */ }
const handleEdit = (row) => { /* 不变 */ }
const handleDelete = (row) => { /* 不变 */ }
const formatDate = (dateString) => { /* 不变 */ }

// 页面挂载时加载数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
/* 其他样式不变，新增层级缩进组件样式 */
.indent-component {
  margin-right: 8px;  /* 缩进组件与部门名称之间的间距 */
}

/* 停用部门名称样式（可选） */
.dept-disabled {
  color: #999;
  text-decoration: line-through;
}

/* 确保树形表格展开图标正常显示 */
::v-deep .el-table__expand-icon {
  margin-right: 4px !important;
}

/* 其他原有样式（common-table-container、fixed-table-container等）不变 */
.common-table-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}
.fixed-table-container {
  flex: 1;
  overflow: auto;
}
.common-table {
  width: 100%;
}
.operation-buttons {
  display: flex;
  gap: 8px;
}
</style>
